<template>
	<view :id="templateId">
		<view class="vip-card">
			<view class="vip-card__content">
				<view class="vip-card__content-title">
					<view class="discount">
						<text class="num">{{
							levelData.discount || "10"
						}}</text>
						<text class="unit">折</text>
					</view>
					<view class="grade">
						<uni-icon
							name="diamond"
							size="44rpx"
							:color="themeStyles.lightMainColor"
						>
						</uni-icon>
						<text class="grade-name">{{
							levelData.customerMemberName || "非会员"
						}}</text>
					</view>
				</view>
				<view
					v-if="
						levelData.consumptionDiff &&
							levelData.nextCustomerMemberName
					"
					class="vip-card__content-desc"
					>再消费{{ levelData.consumptionDiff }}元晋级{{
						levelData.nextCustomerMemberName
					}}</view
				>
			</view>
			<image
				:src="baseTemplateFileUri + 'image/user/vip_card_bg.png'"
				class="vip-card__bg"
			></image>
		</view>
		<view v-if="levelData.customerLevels.length" class="grade-step">
			<view class="grade-step__title">晋级条件</view>
			<view class="grade-step__list">
				<view
					v-for="(item, index) in levelData.customerLevels"
					:key="index"
					:class="{
						current:
							currentLevelIndex !== -1 &&
							currentLevelIndex <= index
					}"
					class="step-item"
				>
					<view class="step-item__round">
						<view
							:class="{
								current:
									currentLevelIndex !== -1 &&
									currentLevelIndex <= index
							}"
							class="content"
						></view>
						<text v-if="index !== 0" class="line"></text>
					</view>
					<view class="step-item__content">
						<view class="title">
							<text class="grade-name">{{
								item.customerMemberName
							}}</text>
							<text class="grade-condition"
								>消费{{ item.consumptionSum }}元达到</text
							>
						</view>
						<view class="desc">享受{{ item.discount }}折</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { queryCustomerLevel } from "@/lib/api/customerServer/info";

import uniIcon from "@/components/uniIcon/uniIcon";
export default {
	components: {
		uniIcon
	},
	data() {
		return {
			levelData: {},
			currentLevelIndex: -1
		};
	},

	onLoad() {
		this.getVipInfo();
	},

	methods: {
		setCurrentLevel(index) {
			const cutStep = this.vipStep[index];
			if (cutStep.current === 1) {
				let currentIndex = index;
			}
			if (index <= currentIndex) {
				return true;
			}
		},

		async getVipInfo() {
			try {
				const { data } = await queryCustomerLevel();
				console.log(data);
				this.levelData = data;

				this.levelData.customerLevels.length &&
					this.levelData.customerLevels.forEach((step, index) => {
						if (
							step.customerLevelId ===
							this.levelData.customerLevelId
						) {
							this.currentLevelIndex = index;
						}
					});
				console.log(" this.currentLevelIndex", this.currentLevelIndex);
			} catch (error) {
				console.log("error", error);
				// this.$api.showToast(error.resultInfo || "操作失败");
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import "@/pages/user/styles/vip/vipDetail.scss";
</style>